<template>
  <lb-layout
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
    :paddBottom="5"
  >
    <el-row style="margin-bottom: 5px">
      <el-col :span="24">
        <el-button @click="goBack" size="small">返回</el-button>
      </el-col>
    </el-row>
    <Title name="园区信息" :line="false" :noLineHeight="true"></Title>
    <el-row style="margin: 20px 0">
      <el-col :span="24">
        <desc-base-info
          :data="info"
          :colnum-info="baseInfo"
          align="right"
          :no-line-height="true"
          label-width="160px"
          class="base-info"
        >
        </desc-base-info>
      </el-col>
    </el-row>
    <Title
      name="楼宇信息"
      :line="false"
      :noLineHeight="true"
      style="margin-bottom: 20px"
    ></Title>
    <lb-table
      :column="tableData.column"
      :data="tableData.data"
      border
      :height="460"
      pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[20, 40, 60, 80]"
      :pager-count="5"
      :current-page.sync="currentPage"
      :total="total"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @p-current-change="handleCurrentChange"
    >
    </lb-table>
  </lb-layout>
</template>

<script>
import { getDetail } from "@/api/park/parkmsg.js";
import { getbuildingList } from "@/api/park/buildingmsg.js";
import { deepClone, dealElectricity } from "@/utils/index";
export default {
  components: {},
  dicts: [],
  data() {
    return {
      info: {},
      currentPage: 1,
      pageSize: 20,
      total: 0,
      tableData: {
        column: [
          {
            prop: "name",
            label: "楼宇名称",
            minWidth: 100,
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "floorNum",
            label: "总层数",
            minWidth: 100,
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "roomNum",
            label: "房间总数",
            minWidth: 100,
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "buildingTypeName",
            label: "建筑类型",
            minWidth: 120,
            align: "center",
            showOverflowTooltip: true,
            // render: (h, scope) => {
            //   return (
            //     <div>
            //       <dict-tag
            //         options={this.dict.type.special_energy_consumption_type}
            //         value={scope.row.subApplication}
            //       />
            //     </div>
            //   );
            // },
          },
          {
            prop: "landArea",
            label: "用地面积",
            minWidth: 100,
            align: "center",
            showOverflowTooltip: true,
            render: (h, scope) => {
              let unit = "㎡";
              let area = scope.row.landArea ?? 0;
              area = dealElectricity(area, 100, 2);
              let a = area + unit;
              return <div>{a}</div>;
            },
          },
          {
            prop: "",
            label: "建筑面积",
            minWidth: 100,
            align: "center",
            showOverflowTooltip: true,
            render: (h, scope) => {
              let unit = "㎡";
              let area = scope.row.buildArea ?? 0;
              area = dealElectricity(area, 100, 2);
              let a = area + unit;
              return <div>{a}</div>;
            },
          },
          {
            prop: "structureName",
            label: "房屋结构",
            minWidth: 120,
            align: "center",
            showOverflowTooltip: true,
            // render: (h, scope) => {
            //   return (
            //     <div>
            //       <dict-tag
            //         options={this.dict.type.special_energy_consumption_type}
            //         value={scope.row.subApplication}
            //       />
            //     </div>
            //   );
            // },
          },
        ],
        data: [],
      },
    };
  },
  computed: {
    baseInfo({ info }) {
      let arr = [];
      // const { model, qrCode, type } = info;
      arr = [
        { label: "园区创建组织", prop: "deptName", colNum: 4 },
        { label: "园区名称", prop: "name", colNum: 4 },
        { label: "楼宇数量", prop: "buildingNum", colNum: 4 },
        { label: "省市区", prop: "provinceCityDistrictName", colNum: 4 },

        { label: "用地面积", prop: "landArea", colNum: 4, unit: "㎡" },
        { label: "建筑面积", prop: "buildArea", colNum: 4, unit: "㎡" },
        { label: "详细地址", prop: "address", colNum: 4 },
        { label: "备注", prop: "remarks", colNum: 4 },

        { label: "联系人", prop: "concatUser", colNum: 4 },
        { label: "联系电话", prop: "concatPhone", colNum: 4 },
        { label: "座机号", prop: "phone", colNum: 4 },
      ];
      return arr;
    },
  },
  created() {
    if (this.$route.query.id) {
      this.getInfo(this.$route.query.id);
      this.getBuildingList(this.$route.query.id);
    }
  },
  mounted() {},
  methods: {
    // 获取建筑列表
    getBuildingList(id) {
      const that = this;
      let params = {
        parkId: id,
      };
      that.$store.commit("app/updateApiCount", "add");
      getbuildingList(params)
        .then((res) => {
          that.$store.commit("app/updateApiCount");
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          that.tableData.data = res?.rows ?? [];
          that.total = res?.total ?? 0;
        })
        .catch(() => {
          that.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!402001");
        });
    },
    getInfo(id) {
      const that = this;
      getDetail(id)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let newData = res?.data || {};
          console.log(newData, "newData");
          newData.landArea = dealElectricity(
            res?.data?.landArea ?? 0,
            100,
            2,
            "number"
          );
          newData.buildArea = dealElectricity(
            res?.data?.buildArea ?? 0,
            100,
            2,
            "number"
          );
          that.info = { ...newData };
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!401004");
        });
    },
    goBack() {
      this.$router.push({
        path: "/resource/park/parkmsg",
        query: {},
      });
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.handlerSearchDetail();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.handlerSearchDetail();
    },
  },
};
</script>

<style lang="scss" scoped>
.base-info {
  ::v-deep .zeda-grid-item {
    .zeda-grid-label {
      font-size: 18px;
    }
    .zeda-grid-value {
      font-size: 22px;
    }
  }
}
</style>
